@import './common/var.scss';

.add-table-container {
  width: 100%;
  padding: 0 40px;

  .cp-search-form {
    padding-bottom: 0;

    .search-btn-box {
      bottom: 0;
    }
  }

  .toolPanel {
    margin: 15px 0px !important;

    div {
      .el-button--sync {
        background-color: $--table-tool-panel-button-sync-background-color;
        border-color: $--table-tool-panel-button-sync-border-color;
        color: $--table-tool-panel-button-sync-color;
      }

      .el-button--export {
        background-color: $--table-tool-panel-button-export-background-color;
        border-color: $--table-tool-panel-button-export-border-color;
        color: $--table-tool-panel-button-export-color;
      }

      .el-button--import {
        background-color: $--table-tool-panel-button-import-background-color;
        border-color: $--table-tool-panel-button-export-border-color;
        color: $--table-tool-panel-button-import-color;
      }
    }

    .search-input {
      float: right;

      .el-input__suffix {
        cursor: pointer;
        border-left: $--border-width-base $--border-style-base $--table-search-input-border-color;
      }
    }
  }

  .edit-btn {
    cursor: pointer;
    color: $--table-button-edit-color;
  }

  .delete-btn {
    cursor: pointer;
    color: $--table-button-delete-color;
  }

  .check-btn {
    cursor: pointer;
    color: $--table-button-check-color;
  }

  .remove-btn {
    cursor: pointer;
    color: $--table-button-remove-color;
  }

  .config-btn {
    cursor: pointer;
    color: $--table-button-config-color;
  }

  .TableButtonList {
    .svg-icon {
      cursor: pointer !important;
    }
  }

  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    margin: 20px 0px;

    .el-pagination__total {
      font-size: $--font-size-base !important;
    }

    .page-detail {
      display: inline-block;

      .el-select {
        .el-input {
          width: 70px;
        }
      }

      span {
        color: $--table-pager-color;
        font-size: $--font-size-base;
        font-weight: $--font-weight-primary;
        ;

        i {
          margin: 0px 5px;
          font-style: $--font-style-base;
        }
      }
    }
  }
}

.table-container {
  width: 100%;
  padding: 0 40px;

  .cp-search-form {
    padding-bottom: 0;

    .search-btn-box {
      bottom: 0;
    }
  }

  .toolPanel {
    margin: 15px 0px !important;

    .search-input {
      float: right;

      .el-input__suffix {
        cursor: pointer;
        border-left: $--border-width-base $--border-style-base $--table-search-input-border-color;
      }
    }
  }

  .edit-btn {
    cursor: pointer;
    margin-right: 15px;
    color: $--table-button-edit-color;
  }

  .config-btn {
    cursor: pointer;
    color: $--table-button-config-color;
  }

  .TableButtonList {
    .svg-icon {
      margin-right: 0 !important;
      cursor: pointer !important;
    }
  }

  .delete-btn {
    cursor: pointer;
    color: $--table-button-delete-color;
  }

  .check-btn {
    cursor: pointer;
    color: $--table-button-check-color;
  }

  .remove-btn {
    cursor: pointer;
    color: $--table-button-remove-color;
  }

  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    margin: 20px 0px;

    .el-pagination__total {
      font-size: $--font-size-base !important;
    }

    .page-detail {
      display: inline-block;

      .el-select {
        .el-input {
          width: 70px;
        }
      }

      span {
        color: $--table-pager-color;
        font-size: $--font-size-base;
        font-weight: $--font-weight-primary;

        i {
          margin: 0px 5px;
          font-style: $--font-style-base;
        }
      }
    }
  }

  .c-form-common {
    .el-form-header {
      padding: 20px;
      border-bottom: $--border-width-base $--border-style-base $--table-form-header-border-color;
      margin-bottom: 20px;
    }

    .wrap-form {
      width: 800px;
      padding-left: 45px;
    }

    .submit-btn {
      width: 845px;
      text-align: right;
      margin-top: 20px;
    }

    .el-input__inner {
      width: 720px;
    }
  }
}

.view-wrap-table {
  padding: 0 40px;
  box-sizing: border-box;

  .cp-search-form {
    padding-bottom: 0;

    .search-btn-box {
      bottom: 0;
    }
  }

  .toolPanel {
    margin: 15px 0px !important;

    .el-button--import {
      background-color: $--table-tool-panel-button-import-background-color;
      border-color: $--table-tool-panel-button-import-border-color;
      color: $--table-tool-panel-button-import-color;
    }

    .search-input {
      float: right;

      .el-input__suffix {
        cursor: pointer;
        border-left: $--border-width-base $--border-style-base $--table-search-input-border-color;
      }
    }
  }

  .edit-btn {
    cursor: pointer;
    color: $--table-button-edit-color;
  }

  .remove-btn {
    cursor: pointer;
    color: $--table-button-remove-color;
  }

  .config-btn {
    cursor: pointer;
    color: $--table-button-config-color;
  }

  .TableButtonList {
    .svg-icon {
      cursor: pointer !important;
    }
  }

  .check-btn {
    cursor: pointer;
    color: $--table-button-check-color;
  }

  .delete-btn {
    cursor: pointer;
    color: $--table-button-delete-color;
  }

  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    margin: 20px 0px;

    .el-pagination__total {
      font-size: $--font-size-base !important;
    }

    .page-detail {
      display: inline-block;

      .el-select {
        .el-input {
          width: 70px;
        }
      }

      span {
        color: $--table-pager-color;
        font-size: $--font-size-base;
        font-weight: $--font-weight-primary;

        i {
          margin: 0px 5px;
          font-style: $--font-style-base;
        }
      }
    }
  }

  .c-form-common {
    .el-form-header {
      padding: 20px;
      border-bottom: $--border-width-base $--border-style-base $--table-form-header-border-color;
      margin-bottom: 20px;
    }

    .wrap-form {
      width: 800px;
      padding-left: 45px;
    }

    .submit-btn {
      width: 845px;
      text-align: right;
      margin-top: 20px;
    }

    .el-input__inner {
      width: 720px;
    }
  }
}

.subtable-container {
  width: 100%;
  padding: 0px 40px 20px 40px;

  .border-bottom {
    border-bottom: $--border-width-base $--border-style-base $--subtable-container-border-color;
  }

  .search-form {
    padding-bottom: 0;

    .search-btn-box {
      bottom: 0;
    }
  }

  .toolPanel {
    margin: 10px 0 !important;

    div.title {
      font-size: $--font-size-base;
      margin-bottom: 8px;
    }

    .search-input {
      float: right;

      .el-input__suffix {
        cursor: pointer;
        border-left: $--border-width-base $--border-style-base $--table-search-input-border-color;
      }
    }
  }

  .wrap-table .pagination {
    margin: 15px 0;
  }

  .toolPanel {
    margin: 15px 0px !important;
  }

  .edit-btn {
    cursor: pointer;
    color: $--table-button-edit-color;
  }

  .delete-btn {
    cursor: pointer;
    color: $--table-button-delete-color;
    ;
  }

  .check-btn {
    cursor: pointer;
    color: $--table-button-check-color;
  }

  .remove-btn {
    cursor: pointer;
    color: $--table-button-remove-color;
  }

  .config-btn {
    cursor: pointer;
    color: $--table-button-config-color;
  }

  .TableButtonList {
    .svg-icon {
      cursor: pointer !important;
    }
  }

  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    margin: 20px 0px;

    .el-pagination__total {
      font-size: $--font-size-base !important;
    }

    .page-detail {
      display: inline-block;

      .el-select {
        .el-input {
          width: 70px;
        }
      }

      span {
        color: $--table-pager-color;
        font-size: $--font-size-base;
        font-weight: $--font-weight-primary;

        i {
          margin: 0px 5px;
          font-style: $--font-style-base;
        }
      }
    }
  }

  .search-input {
    width: 220px;
    position: absolute;
    bottom: 0;
    right: 0;

    input {
      border-radius: $--table-search-input-border-radius;
    }
  }
}

.search-input {
  width: 220px;
  position: absolute;
  bottom: 0;
  right: 0;

  input {
    border-radius: $--table-search-input-border-radius;
  }
}
